<template>
  <div style="margin-left: 50px">
    <h2 style="padding: 10px">权限管理</h2>
<!--    正在查看的项目：{{selectProject}}<br><br>-->
<!--    该项目的人员权限数据：{{dialogData}}<br><br>-->
<!--    选择的人员：{{selectedPeople}}<br><br>-->
    <el-table
        :data="permissionRelations"
        style="width: 100%">

      <el-table-column
          prop="projectId"
          label="项目号">
      </el-table-column>

      <el-table-column
          prop="projectName"
          label="项目名称">
      </el-table-column>

      <el-table-column
          prop="createTime"
          label="创建日期">
      </el-table-column>

      <el-table-column
          prop="numberOfPeople"
          label="人数">
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status==='0'">未开始</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status==='1'">暂停中</el-tag>
          <el-tag type="primary" v-else-if="scope.row.status==='2'">进行中</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status==='3'">停工中</el-tag>
          <el-tag type="success" v-else-if="scope.row.status==='4'">已完成</el-tag>
          <el-tag v-else>未知</el-tag>
        </template>
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog
        :visible.sync="dialogVisible"
        title="权限详情"
        style="min-width: 1300px"
        width="30%">

      <el-button type="primary" @click="toAdd()">添加</el-button>

      <el-table
          :data="dialogData"
          style="width: 100%">
        <el-table-column
            prop="employeeId"
            label="员工号">
        </el-table-column>
        <el-table-column
            prop="employeeName"
            label="员工姓名">
        </el-table-column>
        <el-table-column
            prop="employeePermission"
            label="职位">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <p style="color: #3697e8;cursor: pointer" @click="remove(scope.row)">删除</p>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 弹框 -->
    <el-dialog
        :visible.sync="dialogVisible1"
        title="权限详情"
        style="min-width: 1300px"
        width="30%">

      <el-select v-model="selectedPeople" placeholder="请选择人员" style="width: 100%">
        <el-option v-for="item in addIdData" :key="item.employeeId" :label="item.employeeId+'('+item.employeeName+')'" :value="item.employeeId+' '+item.employeeName"></el-option>
      </el-select>

      <br>

      <el-select v-model="selectedDataPermission" placeholder="请选择权限" style="width: 100%">
        <el-option v-for="item in addPermissionData" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <p style="text-align: center">
        <el-button type="primary" @click="addPeople()">添加</el-button>
      </p>


    </el-dialog>


  </div>
</template>

<script>
export default {
  name:'limit',
  data() {
    return {
      //项目表格数据
      permissionRelations: [
        { projectId: '001',projectName: '工地项目1', createTime: '2024-03-01', numberOfPeople: 3, status: '0' },
        { projectId: '002',projectName: '工地项目2', createTime: '2024-03-05', numberOfPeople: 3, status: '2' },
        { projectId: '003',projectName: '工地项目3', createTime: '2024-03-08', numberOfPeople: 3, status: '1' },
        { projectId: '004',projectName: '工地项目4', createTime: '2024-03-09', numberOfPeople: 3, status: '4' },
        { projectId: '005',projectName: '工地项目5', createTime: '2024-03-10', numberOfPeople: 3, status: '3' },
        // Add more data as needed
      ],
      //是否展示成员权限弹窗
      dialogVisible: false,
      //当前展示的项目
      selectProject:null,
      dialogData: [],
      //成员权限表格
      dialogData1: [
        { employeeId: '1001', employeeName: '张三', employeePermission: '员工' },
        { employeeId: '1002', employeeName: '李四', employeePermission: '主管' },
        { employeeId: '1006', employeeName: '刘八', employeePermission: '管理员' },
        // Add more data as needed
      ],
      dialogData2: [
        { employeeId: '1001', employeeName: '张三', employeePermission: '员工' },
        { employeeId: '1002', employeeName: '李四', employeePermission: '主管' },
        { employeeId: '1003', employeeName: '王五', employeePermission: '管理员' },
        // Add more data as needed
      ],
      dialogData3: [
        { employeeId: '1002', employeeName: '李四', employeePermission: '主管' },
        { employeeId: '1003', employeeName: '王五', employeePermission: '管理员' },
        // Add more data as needed
      ],
      dialogData4: [
        { employeeId: '1001', employeeName: '张三', employeePermission: '员工' },
        { employeeId: '1003', employeeName: '王五', employeePermission: '管理员' },
        // Add more data as needed
      ],
      dialogData5: [
        { employeeId: '1001', employeeName: '张三', employeePermission: '员工' },
        { employeeId: '1002', employeeName: '李四', employeePermission: '主管' },
        // Add more data as needed
      ],

      //是否展示添加员工的弹窗
      dialogVisible1: false,
      //可选择添加的员工数据
      addIdData:[
        { employeeId: '1004', employeeName: '李六' },
        { employeeId: '1005', employeeName: '刘七' },
        { employeeId: '1006', employeeName: '刘八' }
      ],
      addPermissionData:[
        { value: '经理', label: '经理' },
        { value: '主管', label: '主管' },
        { value: '员工', label: '员工' },
      ],
      //选择的人员数据
      selectedPeople:null,
      selectedDataPermission:'员工'

    };
  },
  methods: {
    //添加项目成员
    addPeople()
    {
      if(this.selectProject.projectId==='001')
      {
        const parts = this.selectedPeople.trim().split(' ');

        // 确保至少有一个元素
        let firstPart = parts[0] || '';
        let secondPart = '';

        let data={
          employeeId: '',
          employeeName: '',
          employeePermission: this.selectedDataPermission
        }

        // 如果拆解后的数组长度大于等于2，则取前两个元素
        if (parts.length >= 2) {
          secondPart = parts.slice(1).join(' ');
        }
        data.employeeId=firstPart
        data.employeeName=secondPart

        //判断用户是否已存在
        if (this.dialogData1) {
          const employee = this.dialogData1.find(item => item.employeeId === firstPart);
          if (employee) {
            //已存在
            this.$store.state.GLOBAL_COMMON_MESSAGE = '用户已存在';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          } else {
            //添加
            console.log(data)

            this.dialogData1.push(data)
            this.dialogData=this.dialogData1
          }
        }


      }
      if(this.selectProject.projectId==='002')
      {
        const parts = this.selectedPeople.trim().split(' ');

        // 确保至少有一个元素
        let firstPart = parts[0] || '';
        let secondPart = '';

        let data={
          employeeId: '',
          employeeName: '',
          employeePermission: this.selectedDataPermission
        }

        // 如果拆解后的数组长度大于等于2，则取前两个元素
        if (parts.length >= 2) {
          secondPart = parts.slice(1).join(' ');
        }
        data.employeeId=firstPart
        data.employeeName=secondPart

        //判断用户是否已存在
        if (this.dialogData2) {
          const employee = this.dialogData2.find(item => item.employeeId === firstPart);
          if (employee) {
            //已存在
            this.$store.state.GLOBAL_COMMON_MESSAGE = '用户已存在';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          } else {
            //添加
            console.log(data)

            this.dialogData2.push(data)
            this.dialogData=this.dialogData2
          }
        }

      }
      if(this.selectProject.projectId==='003')
      {
        const parts = this.selectedPeople.trim().split(' ');

        // 确保至少有一个元素
        let firstPart = parts[0] || '';
        let secondPart = '';

        let data={
          employeeId: '',
          employeeName: '',
          employeePermission: this.selectedDataPermission
        }

        // 如果拆解后的数组长度大于等于2，则取前两个元素
        if (parts.length >= 2) {
          secondPart = parts.slice(1).join(' ');
        }
        data.employeeId=firstPart
        data.employeeName=secondPart

        //判断用户是否已存在
        if (this.dialogData3) {
          const employee = this.dialogData3.find(item => item.employeeId === firstPart);
          if (employee) {
            //已存在
            this.$store.state.GLOBAL_COMMON_MESSAGE = '用户已存在';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          } else {
            //添加
            console.log(data)

            this.dialogData3.push(data)
            this.dialogData=this.dialogData3
          }
        }
      }
      if(this.selectProject.projectId==='004')
      {
        const parts = this.selectedPeople.trim().split(' ');

        // 确保至少有一个元素
        let firstPart = parts[0] || '';
        let secondPart = '';

        let data={
          employeeId: '',
          employeeName: '',
          employeePermission: this.selectedDataPermission
        }

        // 如果拆解后的数组长度大于等于2，则取前两个元素
        if (parts.length >= 2) {
          secondPart = parts.slice(1).join(' ');
        }
        data.employeeId=firstPart
        data.employeeName=secondPart

        //判断用户是否已存在
        if (this.dialogData4) {
          const employee = this.dialogData4.find(item => item.employeeId === firstPart);
          if (employee) {
            //已存在
            this.$store.state.GLOBAL_COMMON_MESSAGE = '用户已存在';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          } else {
            //添加
            console.log(data)

            this.dialogData4.push(data)
            this.dialogData=this.dialogData4
          }
        }
      }
      if(this.selectProject.projectId==='005')
      {
        const parts = this.selectedPeople.trim().split(' ');

        // 确保至少有一个元素
        let firstPart = parts[0] || '';
        let secondPart = '';

        let data={
          employeeId: '',
          employeeName: '',
          employeePermission: this.selectedDataPermission
        }

        // 如果拆解后的数组长度大于等于2，则取前两个元素
        if (parts.length >= 2) {
          secondPart = parts.slice(1).join(' ');
        }
        data.employeeId=firstPart
        data.employeeName=secondPart

        //判断用户是否已存在
        if (this.dialogData5) {
          const employee = this.dialogData5.find(item => item.employeeId === firstPart);
          if (employee) {
            //已存在
            this.$store.state.GLOBAL_COMMON_MESSAGE = '用户已存在';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          } else {
            //添加
            console.log(data)

            this.dialogData5.push(data)
            this.dialogData=this.dialogData5
          }
        }
      }
      this.selectedPeople=null
      this.selectedDataPermission='员工'
      this.dialogVisible1=false

    },
    //展示添加员工的界面
    toAdd(){
      this.dialogVisible1 = true;
    },
    //删除员工
    remove(row){
      if(this.selectProject.projectId==='001')
      {
        this.dialogData1 = this.dialogData1.filter(item => item.employeeId !== row.employeeId);
        this.dialogData=this.dialogData1
      }
      if(this.selectProject.projectId==='002')
      {
        this.dialogData2 = this.dialogData2.filter(item => item.employeeId !== row.employeeId);
        this.dialogData=this.dialogData2
      }
      if(this.selectProject.projectId==='003')
      {
        this.dialogData3 = this.dialogData3.filter(item => item.employeeId !== row.employeeId);
        this.dialogData=this.dialogData3
      }
      if(this.selectProject.projectId==='004')
      {
        this.dialogData4 = this.dialogData4.filter(item => item.employeeId !== row.employeeId);
        this.dialogData=this.dialogData4
      }
      if(this.selectProject.projectId==='005')
      {
        this.dialogData5 = this.dialogData5.filter(item => item.employeeId !== row.employeeId);
        this.dialogData=this.dialogData5
      }
      this.dialogData = this.dialogData.filter(item => item.employeeId !== row.employeeId);
    },
    handleView(row) {
      this.selectProject=row
      if(this.selectProject.projectId==='001')
      {
        this.dialogData=this.dialogData1
      }
      if(this.selectProject.projectId==='002')
      {
        this.dialogData=this.dialogData2
      }
      if(this.selectProject.projectId==='003')
      {
        this.dialogData=this.dialogData3
      }
      if(this.selectProject.projectId==='004')
      {
        this.dialogData=this.dialogData4
      }
      if(this.selectProject.projectId==='005')
      {
        this.dialogData=this.dialogData5
      }
      this.dialogVisible = true;
    }
  }
};
</script>
